
// 引入vuex
import { createStore } from "vuex"
import cart from './modules/cart'
import me from './modules/me'
import layout from './modules/layout'

// 创建 vuex实例对象

let store = createStore({
    // 5个属性
    // state getters mutations actions   modules
    state:{  // state 是用来存放数据的，=> 数据是响应式的 =》 通过 vue.reactive 进行代理的
        isNavShow:false,
        age:25,
        nums:20,
        
    },
    getters:{  //相当于计算属性  =》 将getters里面的属性，通过computed方法处理，就有了计算属性
        getSis(state){  //参数1：state
            return state.age +1
        }
    },
    mutations:{ // vuex中唯一能改变 state 中数据的方法 ，写同步
        changeAge(state,val){  // 参数1：state   参数2：调用函数时传递的参数            
            state.age = state.age + 1
        }, 
        changeNums(state,val){
            state.nums = state.nums + val
        }
    },


    actions:{ // 可获取到异步的数据
        // actions定义的方法，就是为了触发mutations中定义的方法
        ayNums({commit}){   // 参数1：state,是一个对象，可以结构   参数2：调用函数时传递的参数
            setTimeout(()=>{
                let data = 100
                commit('changeNums',data);                 
            },1000)
        }
    },

    modules:{  //当我们的项目很大，有很多的模块
        // 例如购物车模块，需要存放很多的数据,全局数据
        // cart:{  //在这 存放数据，有4个属性

        //     namespaced:true,  //空间命名，解决重名问题
        //     state:{
        //         cartData: 100
        //     },
        //     mutations:{
        //         changeCart(state){
        //             console.log('cart');                    
        //             state.cartData = state.cartData + 50
        //         }
        //     }
        // },

        // 对cart进行抽离
        cart:cart,   // 引入抽离的数据

        // 假如有重名模块
        // me:{  //在这 存放数据，有4个属性
        //     namespaced:true,

        //     state:{
        //         cartData: 100
        //     },
        //     mutations:{
        //         changeCart(state){
        //             console.log('me');                    
        //             state.cartData = state.cartData + 50
        //         }
        //     }
        // },
        me:me,  //  引入抽离的数据
        layout:layout,



    }
})

export default store;

